# jQuery Mobile Forms

« Previous
Next Chapter »

jQuery Mobile automatically style HTML forms to make them look engaging and touch-friendly.

## jQuery Mobile Form Structure

jQuery Mobile uses CSS to style HTML form elements, making them attractive and easy to use.

In jQuery Mobile you can use the following form controls:

- Text Inputs
- Search Inputs
- Radio Buttons
- Checkboxes
- Select Menus
- Sliders
- Flip Toggle Switches

When working with jQuery Mobile forms you should know:

- The <form> element must have a method and an action attribute
- Each form element must have a unique "id" attribute. The id must be unique across the pages in the site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present at the same time
- Each form element must have a label. Set the for attribute of the label to match the id of the element

## Example

<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
Try it yourself »

Tip: Use a placeholder to specify a short hint that describes the expected value of an input field:

## Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
Try it yourself »

Tip: To hide the label, use the "ui-hidden-accessible" class. This is often used when you want the element's placeholder attribute to serve as the label:

## Example

<label for="fname" class="ui-hidden-accessible"">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
Try it yourself »

Tip: If you want a "clear button" (an X icon on the right side of the input field that clears the contents of the field), add the data-clear-btn="true" attribute:

## Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
Try it yourself »

| The "clear button" can be added on any <input> element, except for <textarea>. Search fields have this attribute set to "true" as default - to change it, simply specify data-clear-btn="false".

## jQuery Mobile Form Buttons

Buttons in forms are coded with standard HTML <input> elements (button, reset, submit). They are automatically styled, making them attractive and easy-to-use on both mobile devices and desktop computers:

## Example

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
Try it yourself »

To additionally style an <input> button, use any of the data-* attributes listed in the table below:

Bold value indicates default value.

Attribute | Value | Description
--- | --- | ---
data-corners | true | false | Specifies whether the button should have rounded corners or not
data-icon | Icons Reference | Specifies the icon of the button
data-iconpos | left | right | top | bottom | notext | Specifies the position of the icon
data-inline | true | false | Specifies whether the button should be inline or not
data-mini | true | false | Specifies whether the button should be small or not
data-shadow | true | false | Specifies whether the button should have shadows or not

## Include or exclude the attribute(s) you want/don't want:

<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
Try it yourself »

## Field Containers

To make labels and form elements look properly on wider screens, wrap a <div> or <fieldset> element with the "ui-field-contain" class around the label/form element:

## Example

<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Try it yourself »

| The "ui-field-contain" class style labels and form controls based upon the width of the page. When the width of the page is greater than 480px, it automatically place the label on the same line as the form control. When less than 480px, the label will be placed above the form element.

Tip: To prevent jQuery Mobile to automatically style tappable/clickable elements, use the data-role="none" attribute:

## Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
Try it yourself »

| Form submission in jQuery Mobile jQuery Mobile will automatically handle the form submission via AJAX, and will attempt to integrate the server response into the DOM of the application.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples